<template>
  <div class="role">
    <!-- 添加按钮 -->
    <div class="roleAdd">
      <div class="roleBtn">
        <el-dialog
          :title="this.updateId != 0 ? '编辑员工信息' : '添加员工信息'"
          :visible.sync="dialog"
          :close-on-click-modal="false"
          width="35%"
        >
          <el-form
            :model="addStaffData"
            :rules="staffRules"
            ref="staffRef"
            label-width="80px"
            :label-position="labelPosition"
          >
            <el-form-item prop="userId" label="所属用户" v-if="showMessage">
              <el-select
                v-model="addStaffData.userId"
                placeholder="所属用户"
                @change="handlerGet"
              >
                <el-option
                  v-for="(item, index) in freeEmploteeList"
                  :key="index"
                  :label="item.realName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="jobNo" label="员工工号">
              <el-input
                v-model="addStaffData.jobNo"
                placeholder="员工工号(必填)"
              />
            </el-form-item>
            <el-form-item prop="petName" label="姓名">
              <el-input
                v-model="addStaffData.petName"
                placeholder="姓名(必填)"
              />
            </el-form-item>
            <el-form-item prop="phone" label="手机号码">
              <el-input
                v-model="addStaffData.phone"
                placeholder="手机号码(必填)"
              />
            </el-form-item>
            <el-form-item prop="workingYears" label="工作年限">
              <el-input
                v-model="addStaffData.workingYears"
                placeholder="工作年限"
              />
            </el-form-item>
            <el-form-item prop="dateOfEntry" label="入职日期">
              <el-date-picker
                placeholder="入职日期"
                v-model="addStaffData.dateOfEntry"
                type="datetime"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="roleId" label="所属角色">
              <el-select v-model="addStaffData.roleId" placeholder="所属角色">
                <el-option
                  v-for="(item, index) in roleData"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属项目">
              <el-cascader
                v-model="addStaffData.proGroStoJson"
                @change="projectChange1"
                :options="projectData"
                :props="projectProps"
                placeholder="所属项目"
                clearable
                style="width: 70%"
              ></el-cascader>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="reset">重置</el-button> -->
            <el-button type="primary" v-if="updateId == 0" @click="staffAdd"
              >确定添加</el-button
            >
            <el-button type="primary" v-else @click="staffAdd"
              >确定修改</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
    <!-- 内容 -->
    <div class="roleContent">
      <!-- 搜索栏 -->
      <div class="searchCnt">
        姓名:&nbsp;
        <el-select
          v-model="staffForm.id"
          :clearable="true"
          placeholder="请选择姓名"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in staffData"
            :key="index"
            :label="item.petName"
            :value="item.id"
          ></el-option> </el-select
        >所属分支:&nbsp;
        <el-cascader
          v-model="projectValue"
          @change="projectChange(2)"
          :options="projectData"
          :props="projectProps"
          ref="elcascader"
          clearable
        ></el-cascader
        >&nbsp;&nbsp;&nbsp;&nbsp;在职/离职:&nbsp;
        <el-select
          v-model="staffForm.isOnJob"
          placeholder="请选择在职/离职"
          clearable
        >
          <el-option
            v-for="(item, index) in staffStatu"
            :key="index"
            :label="item.statu"
            :value="item.isOnJob"
          ></el-option>
        </el-select>
        <el-button @click="handlergetSerach" type="primary">搜索</el-button>
        <el-button
          @click="addBtn"
          icon="el-icon-circle-plus-outline"
          type="primary"
          >添加工作人员</el-button
        >
      </div>
      <el-table
        :data="staffData"
        style="width: 100%; margin: 0px auto"
        border
        :header-cell-style="{ background: '#f5f5f6', color: '#9EA0A5' }"
      >
        <el-table-column prop="jobNo" label="员工工号" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.jobNo == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.jobNo }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="petName" label="姓名" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.petName == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.petName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.phone == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="role_name" label="所属角色" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.role_name == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.role_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属分支">
          <template slot-scope="scoped">
            <div>
              <el-select
                v-model="arr[scoped.row.empProList]"
                placeholder="查看负责项目或者组或者门店"
                style="width: 70%"
              >
                <el-option
                  v-for="(item, index) in scoped.row.empProList"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </div>
            <!-- {{ scoped.row.projectName }}
            <span v-if="scoped.row.groupName != null">/</span>
            {{ scoped.row.groupName }}
            <span v-if="scoped.row.storeName != null">/</span>
            {{ scoped.row.storeName }} -->
          </template>
        </el-table-column>
        <el-table-column label="开启在职/离职" width="120">
          <template slot-scope="scoped">
            <el-switch
              v-model="scoped.row.isOnJob"
              @change="statuUpdate(scoped.row)"
              active-color="#0077F8"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scoped">
            <el-button
              type="success"
              size="mini"
              plain
              @click="staffEcho(scoped.row)"
              >编辑</el-button
            >
            <el-button
              type="warning"
              plain
              size="mini"
              @click="particularsClick(scoped.row.id)"
              >查看</el-button
            >
            <el-button
              type="danger"
              plain
              size="mini"
              @click="handlerdel(scoped.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="员工详细信息"
        :visible.sync="particularsDialog"
        width="30%"
      >
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">员工姓名</span>
            <span class="right">{{ staffParticularsData.petName }}</span>
          </div>
        </div>
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">员工角色</span>
            <span class="right">{{ staffParticularsData.role_name }}</span>
          </div>
        </div>
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">员工号</span>
            <span class="right">{{ staffParticularsData.jobNo }}</span>
          </div>
        </div>
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">员工手机号</span>
            <span class="right">{{ staffParticularsData.phone }}</span>
          </div>
        </div>
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">入职时间</span>
            <span class="right">{{ staffParticularsData.create_time }}</span>
          </div>
        </div>
        <div class="datum-rowa">
          <div class="row-a">
            <span class="left">工作年限</span>
            <span class="right">{{ staffParticularsData.workingYears }}</span>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="particularsDialog = false">取 消</el-button>
          <!-- <el-button type="primary" @click="particularsDialog = false">确 定</el-button> -->
        </span>
      </el-dialog>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeShopChange"
          @current-change="handleCurrentShopChange"
          :current-page="staffForm.pageNumber"
          :page-sizes="[2, 4, 6, 8, 10]"
          :page-size="staffForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  // 引入api接口
  staffList,
  menuSel,
  roleSelNoPage,
  addStaff,
  udateStaff,
  statuStaff,
  getStaffParticulars,
  deleteEmployee,
  getFreeEmployee
} from "../../utils/api";
let Sa;
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    var validateNumber = (rule, value, callback) => {
      let numberReg = /^\d+$|^\d+[.]?\d+$/;
      if (value !== "") {
        if (!numberReg.test(value)) {
          callback(new Error("请输入数字"));
        } else {
          callback();
        }
      } else {
        callback(new Error("请输入值"));
      }
    };
    // 手机号校验
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        // console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      values: true,
      value: "",
      staffData: [],
      staffForm: {
        pageSize: 10,
        pageNumber: 1,
        id: "",
        isOnJob: "",
        project: "",
        type: "",
        companyId: ""
      },
      particularsDialog: false,
      total: 0,
      dialog: false,
      updateId: 0, //编辑id
      roleValue: "", //所属角色绑定值
      projectValue: "", //所属项目绑定值
      addprojectValue: "",
      roleData: [], // 角色数据
      projectData: [], // 项目数据
      addStaffData: {
        // 添加工作人员数据对象
        userId: "",
        petName: "",
        phone: "",
        roleId: "",
        jobNo: "",
        dateOfEntry: "",
        workingYears: "",
        // projectId: "",
        orgId: "",
        groupId: "",
        companyId: "",
        proGroStoJson: [],
        id: ""
      },
      labelPosition: "left",
      // 输入框校验规则
      staffRules: {
        userId: [
          { required: true, message: "请选择空闲人员", trigger: "blur" }
        ],
        // 姓名校验
        petName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" }
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "blur" }],
        //手机校验
        phone: [
          { required: true, message: "请输入手机号", trigger: "change" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误"
          }
        ],
        jobNo: [
          {
            required: true,
            message: "请输入正确的员工编号",
            trigger: "blur",
            validator: validateNumber
          }
        ],
        workingYears: [],
        dateOfEntry: [
          { required: true, message: "请输入工作年限", trigger: "blur" }
        ]
      },
      // 员工在职离职状态
      staffStatu: [
        {
          id: 1,
          statu: "在职",
          isOnJob: 1
        },
        {
          id: 1,
          statu: "离职",
          isOnJob: 0
        }
      ],
      // 员工详情
      staffParticularsData: {},
      // 菜单选择器配置项
      projectProps: {
        label: "name",
        value: "id",
        children: "children",
        // 父子节点取消选中关联
        checkStrictly: true,
        multiple: true
      },
      arr: [],
      freeEmploteeList: [], //空闲人员的数据
      showMessage: true //是否显示空闲人员的选择狂
    };
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getstaffData();
        this.getProjectList();
        this.getRolelist();
      }
    },

    // 获取空闲人员
    handlergetFreeEmployee() {
      this.postRequest(getFreeEmployee).then(res => {
        if (res.code == 200) {
          this.freeEmploteeList = res.data;
        }
      });
    },
    handlergetSerach() {
      this.staffForm.pageNumber = 1;
      this.getstaffData();
    },
    // 拿到所属用户的信息
    handlerGet(val) {
      this.freeEmploteeList.map(item => {
        if (item.userId == val) {
          this.addStaffData.petName = item.realName;
          this.addStaffData.phone = item.phone;
        }
      });
    },
    // 获取员工列表数据
    getstaffData() {
      this.staffForm.companyId = this.org_id;
      // console.log(this.staffForm);
      this.postRequest(staffList, this.staffForm).then(res => {
        //  console.log(res)
        if (res.code == 200) {
          this.staffData = res.data.data;
          this.staffData.map(v => {
            // console.log(v.isOnJob);
            // 将获得的员工在职状态数据处理一下
            if (v.isOnJob == 1) {
              v.isOnJob = true;
              return;
            } else if (v.isOnJob == 0) {
              v.isOnJob = false;
              return;
            }
          });

          this.total = res.data.count;
        }
        // console.log(this.staffData);
      });
    },
    // 分页
    // 选择每页多少条
    handleSizeShopChange(val) {
      // console.log(val);

      this.staffForm.pageSize = val;
      this.getstaffData();
    },
    // 选择第几页
    handleCurrentShopChange(val) {
      // console.log(val);
      this.staffForm.pageNumber = val;
      this.getstaffData();
    },
    // 添加与修改
    staffAdd() {
      // 判断用户是否填写入职时间
      // console.log(typeof Sa.dateOfEntry);
      if (Sa.dateOfEntry != "") {
        let aa = typeof Sa.dateOfEntry;
        // console.log(aa);

        if (aa != "string") {
          let date = Sa.dateOfEntry;
          // console.log(this.addStaffData);
          // 将标准时间转换一下
          var datetime =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate() +
            " " +
            date.getHours() +
            ":" +
            date.getMinutes() +
            ":" +
            date.getSeconds();
          // 将转换完的时间在放回去
          Sa.dateOfEntry = datetime;
        }
      }
      if (this.addprojectValue == "") {
        Sa.groupId = 0;
        Sa.orgId = 0;
        Sa.projectId = 0;
      }
      // 判断是否传入员工数据 传入了 就是编辑 没有传入 就是添加
      if (this.updateId != 0) {
        this.$refs.staffRef.validate(valid => {
          if (!valid) return false;
          // console.log(this.addStaffData);
          // 调用修改员工接口
          // 将员工id传过去
          Sa.id = this.updateId;
          Sa.companyId = this.org_id;
          Sa.roleId = Sa.roleId == "超级管理员" ? 1 : Sa.roleId;
          Sa.proGroStoJson = JSON.stringify(Sa.proGroStoJson);
          this.postRequest(udateStaff, Sa).then(res => {
            if (res.code == 200) {
              this.$notify.success("修改信息成功");
              // 清空修改id
              this.updateId = 0;
              // 重新调用渲染方法
              this.getstaffData();
              this.dialog = false;
              // 清空表单框
              this.$refs.staffRef.resetFields();
            }
          });
        });
      } else {
        // 添加
        this.$refs.staffRef.validate(valid => {
          if (!valid) return false;
          // 调用添加员工接口
          Sa.companyId = this.org_id;
          Sa.proGroStoJson =
            Sa.proGroStoJson.length == 0
              ? " "
              : JSON.stringify(Sa.proGroStoJson);
          this.postRequest(addStaff, Sa).then(res => {
            if (res.code == 200) {
              this.$notify.success("添加员工成功");
              this.dialog = false;
              this.getstaffData();
              // 清空表单框
              this.$refs.staffRef.resetFields();
            }
          });
        });
      }
    },
    // 回显数据到输入框
    staffEcho(data) {
      this.dialog = true;
      this.showMessage = false;
      // 将修改id存起来
      this.updateId = data.id;
      // 调用方法 获取员工详情
      this.getStaffParticulars(data.id);
    },
    // 获取所有角色数据
    getRolelist() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        PermissionType: 2,
        companyId: this.org_id
      };
      this.postRequest(roleSelNoPage, params).then(res => {
        if (res.code == 200) {
          this.roleData = res.data;
          // console.log(this.roleData);
        }
      });
    },
    // 获取项目列表
    getProjectList() {
      this.postRequest(menuSel, { companyId: this.org_id }).then(res => {
        if (res.code == 200) {
          this.projectData = res.data;
        }
      });
    },
    reset() {
      // 清空表单框
      this.$refs.staffRef.resetFields();
    },
    addBtn() {
      this.updateId = 0;

      // 清空输入框
      (Sa.petName = ""),
        (Sa.phone = ""),
        (Sa.jobNo = ""),
        (Sa.dateOfEntry = ""),
        (Sa.projectId = ""),
        (Sa.workingYears = ""),
        (Sa.roleId = "");
      Sa.proGroStoJson = [];
      this.dialog = true;
    },
    // 搜索
    staffSecah() {
      this.staffForm.pageNumber = 1;
      this.getstaffData();
    },
    // 修改员工在职与离职状态
    statuUpdate(data) {
      let parameter = {};
      // console.log(data);
      // 判断一下员工状态
      if (data.isOnJob == false) {
        parameter.isOnJob = 0;
      } else {
        parameter.isOnJob = 1;
      }
      parameter.id = data.id;
      // console.log(parameter);
      // 调用更新员工状态的接口
      this.postRequest(statuStaff, parameter).then(res => {
        if (res.code == 200) {
          this.getstaffData();
          this.$notify.success(res.msg);
        }
      });
    },
    // 获取员工详细信息
    getStaffParticulars(id) {
      // console.log(id);
      this.postRequest(getStaffParticulars, { id: id }).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.staffParticularsData = res.data[0];
          // 员工入职时间
          Sa.dateOfEntry = res.data[0].dateOfEntry;
          // 员工工作年限
          Sa.workingYears = res.data[0].workingYears;
          // 将数据回显
          Sa.petName = res.data[0].petName;
          Sa.jobNo = res.data[0].jobNo;
          Sa.phone = res.data[0].phone;
          // for (var i = 0; i < res.data[0].employeeArr.length; i++) {
          //   Sa.proGroStoJson.push(res.data[0].employeeArr[i]);
          // }
          Sa.proGroStoJson = res.data[0].employeeArr;

          Sa.roleId =
            res.data[0].roleId == 1 ? "超级管理员" : res.data[0].roleId;
          // Sa.projectId = res.data[0].project_id
        }
      });
    },

    changeDetSelect(key, treeData) {
      let arr = []; // 在递归时操作的数组
      let returnArr = []; // 存放结果的数组
      let depth = 0; // 定义全局层级
      // 定义递归函数
      function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
          depth = depthN; // 将执行的层级赋值 到 全局层级
          arr[depthN] = childrenData[j].id;
          if (childrenData[j].id == key) {
            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
            break;
          } else {
            if (childrenData[j].nodes) {
              depth++;
              childrenEach(childrenData[j].nodes, depth);
            }
          }
        }
        return returnArr;
      }
      return childrenEach(treeData, depth);
    },

    projectChange1(val) {
      this.addStaffData.proGroStoJson = val;
    },
    // 点击删除工作人员
    handlerdel(id) {
      this.$confirm("您确定删除当前工作人员吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(deleteEmployee, { employeeId: id }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getstaffData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 所属分支
    projectChange(num) {
      this.$refs.elcascader.dropDownVisible = false;
      if (num == 1) {
        console.log(this.addprojectValue);
        if (this.addprojectValue.length == 1) {
          this.addStaffData.projectId = this.addprojectValue[0];
        }
        if (this.addprojectValue.length == 2) {
          this.addStaffData.projectId = this.addprojectValue[0];
          this.addStaffData.groupId = this.addprojectValue[1];
        }
        if (this.addprojectValue.length == 3) {
          this.addStaffData.projectId = this.addprojectValue[0];
          this.addStaffData.groupId = this.addprojectValue[1];
          this.addStaffData.orgId = this.addprojectValue[2];
        }
      } else {
        if (this.projectValue.length != 0) {
          var arr2 = this.projectValue.reduce(function(a, b) {
            return a.concat(b);
          });
          if (arr2.length == 1) {
            this.staffForm.project = arr2[0];
            this.staffForm.type = 1;
          }
          if (arr2.length == 2) {
            this.staffForm.project = arr2[1];
            this.staffForm.type = 2;
          }
          if (arr2.length == 3) {
            this.staffForm.project = arr2[2];
            this.staffForm.type = 3;
          }
        } else {
          this.staffForm.project = "";
          this.staffForm.type = "";
          this.staffSecah();
        }
      }
      //   if (this.projectValue.length == 1) {
      //     this.staffForm.project = this.projectValue[0][0];
      //     this.staffForm.type = 1;
      //   }
      //   if (this.projectValue.length == 2) {
      //     this.staffForm.project = this.projectValue[0][1];
      //     this.staffForm.type = 2;
      //   }
      //   if (this.projectValue.length == 3) {
      //     this.staffForm.project = this.projectValue[0][2];
      //     this.staffForm.type = 3;
      //   }
      // }
      // if (this.projectValue.length == 0) {
      //   this.staffForm.project = "";
      //   this.staffForm.type = "";
      //   this.staffSecah();
      // }
    },
    particularsClick(id) {
      this.getStaffParticulars(id);
      this.particularsDialog = true;
    }
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.getstaffData();
      this.getProjectList();
      this.getRolelist();
    }
  },
  created() {
    Sa = this.addStaffData;
    this.getDataInit();
    this.handlergetFreeEmployee();

    // this.getstaffData();
    // this.getProjectList();
    // this.getRolelist();
    // this.addStaffData.userId = window.sessionStorage.getItem("userId");
  }
};
</script>

<style lang="less" scoped>
.role {
  // width: 100%;
  background-color: white;
  // .roleAdd {
  //   // width: 100%;
  //   padding: 16px 0px 16px 26px;
  //   box-sizing: content-box;
  //   .roleBtn {
  //     cursor: pointer;
  //     width: 130px;
  //     height: 30px;
  //     background: rgba(0, 119, 248, 1);
  //     border: 1px solid rgba(1, 101, 209, 1);
  //     opacity: 1;
  //     border-radius: 4px;
  //     display: flex;
  //     flex-direction: row;
  //     align-items: center;
  //     justify-content: space-around;
  //     img {
  //       width: 14px;
  //       height: 14px;
  //     }
  //     span {
  //       font-size: 14px;
  //       color: rgba(255, 255, 255, 1);
  //     }
  //   }
  // }
  .roleContent {
    // width: 100%;
    padding: 16px 26px 16px 26px;
    box-sizing: content-box;
    border: 1px solid rgba(234, 237, 243, 1);
    .searchCnt {
      border: 1px solid rgba(234, 237, 243, 1);
      padding: 16px 0px 16px 20px;
      box-sizing: content-box;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      color: rgba(158, 160, 165, 1);
      font-size: 14px;
      margin-bottom: 20px;
      .el-select {
        margin-right: 20px;
      }
      span {
        display: block;
        width: 110px;
        height: 30px;
        background: rgba(0, 119, 248, 1);
        border: 1px solid rgba(1, 101, 209, 1);
        opacity: 1;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        color: white;
        margin-left: 50px;
      }
    }
    .datum-rowa {
      // width: 30%;
      height: 32px;
      border-radius: 6px;
      border: 1px solid rgba(234, 237, 243, 1);
      padding-right: 5px;
      margin-bottom: 20px;
      .row-a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        span {
          display: block;
          height: 100%;
          line-height: 32px;
          font-size: 13px;
        }
        .left {
          text-align: right;
          background-color: #eaedf3;
          width: 35%;
          color: rgba(158, 160, 165, 1);
          padding-right: 10px;
        }
        .right {
          text-align: left;
          background: rgba(255, 255, 255, 1);
          width: 65%;
          padding-left: 10px;
        }
      }
    }
    /deep/.el-table {
      /deep/.el-table__header-wrapper {
        /deep/.el-table__header {
          /deep/.has-gutter {
            background-color: rgba(255, 255, 255);
          }
        }
      }
    }
  }
}
</style>
